//commonjs规范
const eslintplugin = require("eslint-webpack-plugin");
const minicss = require("mini-css-extract-plugin");
const minimizer = require("css-minimizer-webpack-plugin");
const htmlwebpackplugin = require("html-webpack-plugin");
module.exports = {
  //none,development,production
  mode: "development", //指定是生产打包还是开发打包
  //错误定位到打包前的代码
  devtool: "eval-cheap-source-map",
  optimization: {
    splitChunks: {
      chunks: "all", //all,async,initial

      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          filename: "vendor.js",
          chunks: "all",
          minChunks: 1,
        },
        common: {
          filename: "common.js",
          chunks: "all",
          minChunks: 2,
          minSize: 0,
        },
      },
    },
    runtimeChunk: {
      name: "runtime.js",
    },
  },
  //第三方库单独打包-vendor,runtime
  //推荐写法，无论单多入口，推荐一个对象
  //单入口 -> runtime + Vendor + 核心业务 + 异步模块
  //多入口 -> runtime + Vendor + 每个入口的核心业务代码 + common
  entry: {
    app: "./app.js",
    // app2: "./app2.js",
  },
  output: {
    path: __dirname + "/dist",
    //入口名
    filename: "[name].[chunkhash:4].bundle.js",
    publicPath: "www.xxx.com",
  },
  //devserver
  devServer: {
    port: 1000,
    //热更新 不刷新浏览器的情况下更新页面。可以保持当前页面的状态(CSS)
    hot: true,
    //开发阶段解决跨域问题
    proxy: {
      "/": {
        target: "http://localhost:3000",
        //路径重写
        pathRewrite: {
          "^/num1": "/api/getNum1",
          "^/num2": "/api/getNum2",
        },
        headers: {},
      },
    },
  },
  //loader
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "ts-loader",
        },
      },
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          //preset -> @babel/present-env
          options: {},
        },
      },
      {
        test: /\.css/,
        use: [minicss.loader, "css-loader", "./mycss-loader"],
      },
      {
        test: /\.less/,
        use: [minicss.loader, "css-loader", "less-loader"],
      },
      //webpack3/4
      // {
      //   test: /\.(jpg|jpeg|png|gif|svg)$/,
      //   loader: "url-loader",
      //   options: {
      //     limit: 0,
      //     name: "[name].[hash].[ext]",
      //   },
      // },
      //webpack5
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        type: "asset", //asset/inline asset/resource
        parser: {
          dataUrlCondition: {
            maxSize: 200,
          },
        },
        generator: {
          filename: "./img/[name].[chunkhash].[ext]",
        },
      },
    ],
  },
  //额外的rules + 提供一套现成的规范
  plugins: [
    // new eslintplugin(),
    new minicss({
      filename: "./css/test.bundle.css",
    }),
    new minimizer(),
    new htmlwebpackplugin({
      template: "./index.html",
      filename: "index.html",
      chunks: ["app"],
      title: "hello",
      arr: [{ title: "div1" }, { title: "div1" }, { title: "div1" }],
      minify: {
        collapseWhitespace: false,
        removeComments: false,
        removeAttributeQuotes: false,
      },
      //决定引入的.js放置的位置
      inject: "body", //body|true,head,false
    }),
    // new htmlwebpackplugin({
    //   template: "./index.html",
    //   filename: "index2.html",
    //   chunks: ["app2"],
    //   title: "hello",
    //   arr: [{ title: "div1" }, { title: "div1" }, { title: "div1" }],
    // }),
  ],
  resolve: {
    //路径别名
    alias: {
      "@css": "/css",
    },
    //省略后缀
    extensions: [".js", ".css", ".json"],
  },
};
//多入口-多个html
